<template>
  <div>
    <!-- 抽屉 -->
    <el-drawer title="" :visible.sync="drawer" :direction="direction" size="80%">
      <el-row>
        <el-col :span="22" :offset="1">
          <div>
            <template>
              <el-table :data="proMaterials" stripe style="width: 100%">
                <el-table-column prop="pId" label="物料编号">
                </el-table-column>
                <el-table-column prop="pName" label="物料名称">
                </el-table-column>
                <el-table-column prop="typeName" label="用途类型">
                </el-table-column>
                <el-table-column prop="projName" label="物料描述">
                </el-table-column>
                <el-table-column prop="unit" label="单位">
                </el-table-column>
                <el-table-column prop="price" label="计划成品单价">
                </el-table-column>
                <el-table-column fixed="right" label="添加" width="100">
                  <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="additionMaterial(scope.row)">添加</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
            <template>
              <!--@size-change：当条数发现改变时触发-->
              <!--@current-change：当页码发生改变时触发-->
              <el-pagination style="margin-top: 5px;" layout="sizes, prev, pager, next, jumper, ->, total"
                :total="total2" :page-size.sync="pageSize2" :page-sizes="pageSizes2" :current-page.sync="currentPage2"
                :pager-count="pagerCount2" background @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2">
              </el-pagination>
            </template>
          </div>
        </el-col>
      </el-row>
    </el-drawer>
    <!-- 模态框 -->
    <el-dialog :visible.sync="dialogVisible" top="25px" width="90%" :before-close="handleClose">
      <div style="box-shadow: 0 10px 10px rgba(132, 172, 232, .12), 0 0 6px rgba(132, 172, 232, .04)">
        <div align="center">
          <h2>物料组成设计单</h2>
        </div>
        <div>
          <el-form ref="form" id="form">
            <el-row>
              <el-col :span="10" :offset="1">
                <el-form-item label="产品名称：" label-width="110px">
                  <span>{{theProductName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item label="产品编号：" label-width="110px">
                  <span>{{fileNumber}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="1" style="margin-top: 10px;">
                <el-form-item label="设计人："  size="mini"label-width="95px">
                  <el-input v-model="designer"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22" :offset="1">
                <template>
                  <el-table :data="materials" stripe style="width: 100%" @selection-change="handleSelectionChang">
                    <el-table-column header-align="center" align="center" type="selection"></el-table-column>
                    <el-table-column prop="pId" label="物料编号">
                    </el-table-column>
                    <el-table-column prop="pName" label="物料名称">
                    </el-table-column>
                    <el-table-column prop="typeName" label="用途类型">
                    </el-table-column>
                    <el-table-column prop="projName" label="描述">
                    </el-table-column>
                    <el-table-column prop="num" label="数量">
                                             <template slot-scope="scope">
                                                
                        <el-input size="small" v-model="scope.row.num" @input="modifiedSubtotal(scope.row)"></el-input>
                                              
                      </template>
                                           </el-table-column>
                    <el-table-column prop="unit" label="单位">
                    </el-table-column>
                    <el-table-column prop="price" label="计划成本单价（元）">
                    </el-table-column>
                    <el-table-column prop="count" label="小计（元）">
                      <template slot-scope="scope">
                        <el-input size="small"  v-model="scope.row.num*scope.row.price" >

                        </el-input> 
                      </template>

                    </el-table-column>
                  </el-table>
                </template>
                <br>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="1">
                <el-form-item label="登记人："  label-width="110px">
                  <el-input size="mini" v-model="registrant"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item label="登记时间:" label-width="110px">
                  <span>{{registrationTime}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22" :offset="1">
                <el-form-item label="设计要求:" label-width="110px">
                  <el-input resize="none" type="textarea" :rows="4" v-model="designRequirements" autocomplete="off">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openDrawerAndSelectproMaterials()">添加物料</el-button>
        <el-button type="danger" @click="deleteTheMaterial()">删除物料</el-button>
        <el-button type="primary" @click="materialCompositionAuditThrough()">提交</el-button>
      </span>
    </el-dialog>
    <!-- 主题 -->
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="24">
            <div class="reCheckProductSumClass">
              当前等待审核的设计单总数：{{reCheckProductSum}}例
            </div>
          </el-col>
        </el-row>
        <el-row>
          <br>
        </el-row>
      </el-header>
      <el-main style="height: 475px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px;">
        <div>
          <template>
            <el-table :data="materialCompositionDesignReview" stripe style="width: 100%">
              <el-table-column prop="id" label="设计单编号">
              </el-table-column>
              <el-table-column prop="pid" label="产品编号">
              </el-table-column>
              <el-table-column prop="pname" label="产品名称">
              </el-table-column>
              <el-table-column prop="time" label="登记时间">
              </el-table-column>
              <el-table-column prop="sunPrice" label="物料总成本">
              </el-table-column>
              <el-table-column fixed="right" label="审核">
                <template slot-scope="scope">
                  <el-button size="mini" @click="openModalBoxBindingMessage(scope.row)">审核</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <template>
            <!--@size-change：当条数发现改变时触发-->
            <!--@current-change：当页码发生改变时触发-->
            <el-pagination style="margin-top: 5px;" layout="sizes, prev, pager, next, jumper, ->, total" :total="total"
              :page-size.sync="pageSize" :page-sizes="pageSizes" :current-page.sync="currentPage"
              :pager-count="pagerCount" background @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
            </el-pagination>
          </template>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: 'reviewTheMaterialCompositionDesignList',
    data() {
      return {
        /* reviewTheMaterialCompositionDesignList */
        nowTime: '',
        /* 总条数 */
        reCheckProductSum: 4,
        /* 测试数据 */
        materialCompositionDesignReview: [],
        /* 分页 */
        total: 0, //总条数
        pageSize: 5, //每页显示多少条
        pageSizes: [2, 3, 5, 7], //每页显示条数候选值
        currentPage: 1, //当前页
        pagerCount: 5, //最多显示的页码，多余的会折叠
        /* 分页2 */
        total2: 500, //总条数
        pageSize2: 5, //每页显示多少条
        pageSizes2: [2, 3, 5, 7], //每页显示条数候选值
        currentPage2: 1, //当前页
        pagerCount2: 5, //最多显示的页码，多余的会折叠
        /* 模态框显示 */
        dialogVisible: false,
        /* 档案编号 */
        fileNumber: '',
        id: '',
        /* 产品名称 */
        theProductName: '',
        /* 设计人 */
        designer: '',
        /* 登记人 */
        registrant: '',
        /* 设计要求 */
        designRequirements: '',
        /* 登记时间 */
        registrationTime: '',
        /* 选择的物料 */
        materials: [],
        /* 用户选择的行的信息,用于删除 */
        selections: [],
        /* 抽屉 */
        drawer: false,
        direction: 'ltr',
        /* 存储产品类型为物料的全部信息 */
        proMaterials: [],
      }
    },
    mounted: function() {
      /* 页面加载时启动计时器 */
      this.currentTime();
      /* 查询未通过的所有的物料组成信息 */
      this.notPassAllMaterialComposition();
    },
    methods: {
      /* 物料组成审核方法 */
      materialCompositionAuditThrough() {
        /* 物料组成审核方法 */
        this.$http.post("design/ProWuliaoTab/updateProWuliaoTabAllAndDetaile", this.$qs.stringify({
            "pId": this.fileNumber,
            "id": this.id,
            "list": this.materials
          }, {
            arrayFormat: 'list',
            allowDots: true
          }))
          .then(res => {
            if (res.data > 0) {
              this.$message.success('物料组成设计单审核成功！');
              /* 刷新 */
              this.notPassAllMaterialComposition();
            } else {
              this.$message.error('物料组成设计单审核失败！');
              /* 刷新 */
              this.notPassAllMaterialComposition();
            }
          })
        /* 调用关闭模态框的方法 */
        this.handleClose();
      },

      /* 查询未通过的所有的物料组成信息 */
      notPassAllMaterialComposition() {
        this.$http.post("design/ProWuliaoTab/selectAllMaterialCompositionDesignReviewByReviewSign", "pageNum=" + this
          .currentPage +
          "&pageSize=" + this.pageSize).then(res => {
          console.log(res);
          this.materialCompositionDesignReview = res.data.rows
          //总页码设置
          this.total = res.data.total;
        });
      },

      /* 添加物料假信息 */
      additionMaterial(scope) {
        var num = 0;
        /* 循环存储物料信息 */
        this.materials.some((item, i) => {
          if (item.pId == scope.pId) {
            num++;
          }
        })
        /* 判断存储物料信息中是否有当前需要添加的物料信息 */
        if (num <= 0) {
          this.materials.push(scope);
        } else {
          this.$message.error('你已添加此物料，请不要重新操作');
        }
      },

      /* 打开模态框并绑定数据 */
      openModalBoxBindingMessage(scope) {
        /* 设计单编号 */
        this.id = scope.id;
        /* 产品编号 */
        this.fileNumber = scope.pid;
        /* 名称 */
        this.theProductName = scope.pname;
        /* 登记时间 */
        this.registrationTime = this.nowTime;
        /* 根据物料组成编号查询物料组成明细信息 */
        /* 查找物料基本信息 */
        console.log(scope);
        this.$http.post("design/ProWuliaoDetaile/selectDetailsOfMaterialCompositionById", "id=" + scope.proSigeId).then(
          res => {
            this.materials = res.data;
          });
        /* 打开模态框 */
        this.dialogVisible = true;
      },

      /* 关闭模态框抽发事件 */
      handleClose() {
        /* 关闭模态框 */
        this.dialogVisible = false;
        /* 清空存储物料信息 */
        this.materials = [];
      },

      /* 打开抽屉并绑定物料基本信息 */
      openDrawerAndSelectproMaterials() {
        this.selectproMaterials();
        /* 打开抽屉 */
        this.drawer = true;
      },

      /* 查询物料基本信息 */
      selectproMaterials() {
        /* 查找物料基本信息 */
        this.$http.post("design/proInformation/selectProductTypeByMaterials", "pageNum=" + this.currentPage2 +
          "&pageSize=" + this.pageSize2).then(res => {
          this.proMaterials = res.data.rows
          //总页码设置
          this.total2 = res.data.total;
        });
      },

      /* 当数量发生改变时，触发事件 */
      modifiedSubtotal(scope) {
        console.log(scope);
        //单价 scope.price
        //数量 scope.num
        if (scope.num != "") {
          scope.subtotal = parseFloat(scope.num) * parseFloat(scope.price);
        } else {
          scope.subtotal = "";
        }
      },

      /* 删除物料基本信息【假数据删除】 */
      deleteTheMaterial() {
        //this.materials	假数据
        console.log(this.selections);
        //循环删除物料基本信息
        this.selections.some((item, i) => {
          //删除Vue指定元素数组
          this.materials.splice(this.materials.indexOf(item), 1);
        })
      },

      /* 改变size[每页条数]调用方法*/
      handleSizeChange() {
        /* 只要改变马上调用分页查询 */
        this.notPassAllMaterialComposition();
      },

      /* 改变page[当前页码]调用方法*/
      handleCurrentChange() {
        /* 只要改变马上调用分页查询 */
        this.notPassAllMaterialComposition();
      },

      /* 改变size[每页条数]调用方法*/
      handleSizeChange2() {
        /* 只要改变马上调用分页查询 */
        this.selectproMaterials();
      },

      /* 改变page[当前页码]调用方法*/
      handleCurrentChange2() {
        /* 只要改变马上调用分页查询 */
        this.selectproMaterials();
      },

      /* 获取当前用户选择的行 */
      handleSelectionChang(value) {
        this.selections = value;
      },

      /* 定时器 */
      currentTime() { //定时器
        setInterval(this.getDate, 100)
      },

      /* 获取当前时间 */
      getDate() {
        const year = new Date().getFullYear()
        const month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)
        const date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
        const hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
        const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
        const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
        const week = new Date().getDay()
        this.nowTime = year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm + ':' + ss
      },
      /*
       * 网上自定义提示方式[删除提示框]
       * 类似如模态框，封装模态框，在main中调用
       * 使用方法和模态框一致
       * 就是封装消息提示
       */
    },
    // 销毁定时器
    beforeDestroy: function() {
      if (this.getDate) {
        clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
      }
    },
  }
</script>

<style scoped>
  #form .el-form-item {
    background-color: aliceblue;
  }

  /* 页面地址栏显示的背景设置 */
  .bg-9EA4D8 {
    color: #FFFFFF;
    background-color: #A4D1FF;
  }

  .el-header {
    line-height: 40px;
    background-color: #333333;
  }

  .reCheckProductSumClass {
    font-size: 13px;
  }
</style>
